<template>
  <div>
    <div class="search">
      <span>订单编号：</span><el-input
        v-model="orderNo"
        style="width: 260px"
        placeholder="请输入订单编号"
      />
      <span>选择日期：</span>
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="~"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
      <el-button icon="el-icon-search" @click="search">查询</el-button>
    </div>
    <div class="body">
      <!-- table表格 -->
      <el-table :data="dingdanList" style="width: 100%">
        <el-table-column
          type="index"
          :index="indexMethod"
          label="序号"
          width="80"
        />
        <el-table-column prop="orderNo" label="订单编号" width="220" />
        <el-table-column prop="skuName" label="商品名称" width="180" />
        <el-table-column prop="price" label="订单金额（元）" width="180">
          <template v-slot="{row}">
            <span>{{ row.price/100 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="innerCode" label="设备编号" width="180" />
        <el-table-column prop="status" label="订单状态" width="200">
          <template v-slot="{row}">
            <span v-if="row.status===0">未支付</span>
            <span v-else-if="row.status===1">支付完成</span>
            <span v-else-if="row.status===2">出货成功</span>
            <span v-else-if="row.status===3">出货失败</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="订单日期" width="200">
          <template v-slot="{row}">
            <span>{{ row.createTime.replace("T",' ') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <template v-slot>
            <el-button
              size="mini"
              type="text"
              style="color: blue"
            >查看详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div ref="page" class="page">
        <span
          class="sum"
        >共{{ totalCount }}条记录 第 {{ pageIndex }}/{{ totalPage }} 页</span>
        <el-pagination
          small
          layout="prev, pager, next"
          prev-text="上一页"
          next-text="下一页"
          :total="+totalCount"
          @prev-click="prevclick"
          @next-click="nextclick"
          @click="add"
        />
      </div>
    </div>
  </div>
</template>

<script>
import { getDingdanList } from '@/api/order'
export default {
  name: 'Order',
  data() {
    return {
      type: 'get',
      // 订单编号
      orderNo: '',
      value1: '',
      // 订单列表
      dingdanList: [],
      pageSize: 10,
      pageIndex: 1,
      totalCount: null,
      totalPage: null
    }
  },
  created() {
    // 获取订单列表
    if (this.type === 'get') {
      this.getDingdanList()
    }
  },
  methods: {
    // 新建
    add() {
      return
    },
    // 搜索⭐
    async search() {
      let startDate = new Date(this.value1[0])
      startDate = startDate.getFullYear() + '-' + ((startDate.getMonth() + 1) < 10 ? ('0' + (startDate.getMonth() + 1)) : (startDate.getMonth() + 1)) + '-' + ((startDate.getDate() + 1) < 10 ? ('0' + (startDate.getDate() + 1)) : (startDate.getDate() + 1)) // 2019-5-12 8:0:0
      console.log(startDate)
      let endDate = new Date(this.value1[1])
      endDate = endDate.getFullYear() + '-' + ((endDate.getMonth() + 1) < 10 ? ('0' + (endDate.getMonth() + 1)) : (endDate.getMonth() + 1)) + '-' + ((endDate.getDate() + 1) < 10 ? ('0' + (endDate.getDate() + 1)) : (endDate.getDate() + 1)) // 2019-5-12 8:0:0
      console.log(endDate)

      this.type = 'search'
      const res = await getDingdanList({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        orderNo: this.orderNo,
        startDate: startDate,
        endDate: endDate
      })
      this.dingdanList = res.currentPageRecords
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
      if (this.totalCount <= 10 && this.totalPage < 2) {
        this.$refs.page.style.display = 'none'
      }
    },
    // 获取订单列表
    async getDingdanList() {
      this.type = 'get'
      const res = await getDingdanList({
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      })
      this.dingdanList = res.currentPageRecords
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
    },
    // 序号
    indexMethod(index) {
      return index + 1 + (this.pageIndex - 1) * this.pageSize
    },
    // 切换分页
    prevclick() {
      this.pageIndex--
      this.getDingdanList()
    },
    nextclick() {
      if (this.pageIndex < this.totalPage) {
        this.pageIndex++
        this.getDingdanList()
      }
    }
  }
}
</script>

<style scoped lang="scss">
//新增修改弹层
::v-deep .el-dialog {
  border-radius: 10px;
  .centerDialogVisibleTitle {
    float: left;
  }
  .dialog-footer {
    .esc {
      background-color: #fbf4f0 !important;
      border: none;
      color: #655b56 !important;
    }
    .enter {
      color: #fff;
      background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
      border: 0;
    }
  }
}
//搜索
.search {
  background-color: #fff;
  height: 60px;
  line-height: 60px;
  padding-left: 15px;
  margin-right: 20px;
  .el-input {
    padding: 0 15px;
  }
  .el-button {
    margin-left: 10px;
    background-color: #5f84ff;
    color: #fff;
  }
}
//table表格
.body {
  background-color: #fff;
  margin-right: 20px;
  margin-top: 20px;
  .add {
    color: #fff;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: 0;
    margin: 20px 0 20px 15px;
  }
  .el-table {
    padding-left: 15px;
    .el-table-column {
      height: 20px;
    }
  }
  .page {
    display: flex;
    align-items: center;
    padding: 30px 30px 50px 20px;
    .sum {
      color: #dbdfe5 !important;
    }
    //分页器
    .el-pagination {
      margin-left: 980px;
      ::v-deep .el-pager {
        display: none;
      }
      ::v-deep .btn-next {
        margin-left: 20px;
        border-radius: 3px;
        width: 80px;
        height: 35px;
        text-align: center;
        background-color: #d5ddf8;
        cursor: default;
      }
      ::v-deep .btn-prev {
        border-radius: 3px;
        width: 80px;
        height: 35px;
        text-align: center;
        background-color: #d5ddf8;
        cursor: default;
      }
      ::v-deep .btn-next :disabled {
        color: #c0c4cc;
      }
      ::v-deep .btn-prev :disabled {
        color: #c0c4cc;
      }
    }
  }
}
</style>
